<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>API</title>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>

<style type="text/css">
  .div1{
  	border: 1px red solid;
  	overflow:hidden;
    background-color: #4A5D6C
  }
  .div2{
  	border: 0px green solid;
  	width:426px;
	  position:relative;
  }
</style>
</head>
<body>
<input type="button" value="点击运动" onclick="running();"/>
<div id="panel"></div>
<div class="div1">
    <div class="div2">
    <img src="images/bike2.gif"/>
	</div>
</div>

<script type="text/javascript">
function running(){
    var parentDivWidth = $(".div2").parent().width();
    //var moveWidth=parentDivWidth;//-$(".div2").width();
    var selfWidth=$(".div2").width();
    $("#panel").text(selfWidth);
	$(".div2").animate({left: parentDivWidth+'px'},8000,"linear",function(){
		$(this).css("visibility","hidden");
		$(this).css("left",-selfWidth+"px");
		$(this).css("visibility","visible");
		running();
	});

}
</script>
</body>
</html>